<!-- 考勤统计 -->
<template>
  <a-card :bordered="false" class="table-page-search-wrapper">
    <a-tabs v-model="tabCurrent">
      <a-tab-pane key="1" tab="买卖合同">
        <vxe-grid
          id="ContractImport1"
          ref="vxeTable"
          v-bind="options"
          :columns="columns"
          :data="dataSource"
          highlight-current-row
          @toolbar-button-click="toolbarButtonClickEvent"
        >
        </vxe-grid>
      </a-tab-pane>
      <a-tab-pane key="2" tab="租赁合同">
        <vxe-grid
          id="ContractImport3"
          ref="vxeTable"
          v-bind="options"
          :columns="columns2"
          :data="dataSource2"
          highlight-current-row
          @toolbar-button-click="toolbarButtonClickEvent"
        >
        </vxe-grid>
      </a-tab-pane>
      <a-tab-pane key="3" tab="物业合同">
          <vxe-grid
            id="ContractImport3"
            ref="vxeTable"
            v-bind="options"
            :columns="columns3"
            :data="dataSource3"
            highlight-current-row
            @toolbar-button-click="toolbarButtonClickEvent"
          >
          </vxe-grid>
      </a-tab-pane>
    </a-tabs>
    <j-import-modal ref="importModal" :url="importUrl" @ok="importOk"></j-import-modal>
  </a-card>
</template>
<script >
import JImportModal from '@/components/jeecg/JImportModal'
import { getAction } from '@/api/manage'
export default {
  name: 'ContractImport',
  components: {
    JImportModal
  },
  data() {
    return {
      columns: [
        { type: 'seq', width: 60 },
        { field: 'contractCode', title: '合同编号', showOverflow: true },
        { field: 'item', title: '甲方编码', showOverflow: true },
        { field: 'company', title: '甲方' },
        { field: 'partyASocialCreditcode', title: '统一社会信用代码' },
        { field: 'ownerCode', title: '乙方编码' },
        { field: 'partyB', title: '乙方' }
      ],
      columns2: [
        { type: 'seq', width: 60 },
        { field: 'signingDate', title: '签订日期', showOverflow: true },
        { field: 'contractCode', title: '合同编号', showOverflow: true },
        { field: 'item', title: '出租方' },
        { field: 'company', title: '出租方名称' },
        { field: 'ownerCode', title: '承租方编号' },
        { field: 'ownerName', title: '承租方' },
        { field: 'projectCode', title: '项目编号', showOverflow: true },
        { field: 'leaseArea', title: '租赁面积（㎡）', showOverflow: true },
        { field: 'rentMethod', title: '缴纳方式' },
        { field: 'leaseEndtime', title: '租赁结束时间' },
        { field: 'ownerCode', title: '承租方编号' },
        { field: 'ownerName', title: '承租方' }
      ],
      columns3: [
        { type: 'seq', width: 60 },
        { field: 'contractCode', title: '合同编号', showOverflow: true },
        { field: 'item', title: '甲方编码', showOverflow: true },
        { field: 'company', title: '甲方（物业公司）' },
        { field: 'ownerName', title: '业主名称' },
        { field: 'projectName', title: '项目名称' },
        { field: 'serviceStarttime', title: '服务开始时间' },
        { field: 'serviceEndtime', title: '服务结束时间' },
        { field: 'paymentMethod', title: '缴费方式' },
        { field: 'isThreeSeven', title: '是否三七' }
      ],
      url: {
        list: '/community/contract/list',
        list2: '/community/contract/list',
        list3: '/community/contract/list',
        import: '/custom/importLeaseContract',
        import2: '/custom/importLeaseContract',
        import3: '/custom/importLeaseContract'
      },
      importUrl: '',
      tableToolbar: {
        refresh: {
          query: () => {
            this.loadData(1)
          }
        },
        buttons: [
          { code: 'myImport', name: '导入', status: 'perfect', icon: 'vxe-icon--upload' },
          { code: 'save', name: '保存', status: 'perfect', icon: 'vxe-icon--check' }
        ],
        perfect: true,
        export: false,
        import: false,
        print: true,
        zoom: true,
        custom: true,
        slots: {
          buttons: 'toolbar_buttons'
        }
      },
      loading: false,
      dataSource: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}],
      dataSource2: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}],
      dataSource3: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}],
      selectionRows: [],
      selectedRowKeys: [],
      height: 400,
      tabCurrent: '1'
    }
  },
  computed: {
    options() {
      return {
        border: true,
        resizable: true,
        loading: this.loading,
        height: this.height,
        align: 'center',
        'toolbar-config': this.tableToolbar,
        'export-config': {},
        'custom-config': { storage: { visible: true, resizable: true }}
      }
    }
  },
  methods: {
    toolbarButtonClickEvent({ code }) {
      switch (code) {
        case 'myExport':
          this.$refs.vxeTable.exportData({
            type: 'csv'
          })
          break
        case 'refresh':
          this.refresh()
          break
        case 'myImport':
          this.handleImportXls()
          break
        case 'save':
          this.handleSub()
          break
      }
    },
    onSelectChange({ records }) {
      this.selectedRowKeys = []
      records.forEach(item => {
        this.selectedRowKeys.push(item.id)
      })
      this.selectionRows = records
    },
    handleImportXls() {
      if (this.tabCurrent === '1') {
        this.importUrl = this.url.import
      } else if (this.tabCurrent === '2') {
        this.importUrl = this.url.import2
      } else if (this.tabCurrent === '3') {
        this.importUrl = this.url.import3
      }
      console.log(this.importUrl)
      this.$refs.importModal.show()
    },
    importOk() {
      if (this.tabCurrent === '1') {
        this.loadData(1)
      } else if (this.tabCurrent === '2') {
        this.loadData2(1)
      } else if (this.tabCurrent === '3') {
        this.loadData3(1)
      }
    },
    handleSub(row) {

    },
    loadData() {
      getAction(this.url.list).then(res => {

      })
    },
    loadData2() {
      getAction(this.url.list2).then(res => {

      })
    },
    loadData3() {
      getAction(this.url.list3).then(res => {

      })
    },
    refresh() {
      if (this.tabCurrent === '1') {
        this.loadData(1)
      } else if (this.tabCurrent === '2') {
        this.loadData2(1)
      } else if (this.tabCurrent === '3') {
        this.loadData3(1)
      }
    }
  },
  mounted() {
    setTimeout(() => {
      if (this.$refs.vxeTable) {
        const clientHeight = document.documentElement.clientHeight
        const tableTop = this.$refs.vxeTable.$el.getBoundingClientRect().top
        this.height = clientHeight - tableTop - 40
      }
    }, 200)
  }
}
</script>

<style scoped>
  @import '~@assets/less/common.less';
</style>
